<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper search-box-cuesList">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="6">
            <a-form-item label="关键词">
              <a-select v-model="queryParam.keyword" placeholder="请选择关键词" class="select-box">
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="item in keywordList" v-if="item!=null" :key="item.keywordName">{{
                  item.keywordName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="6">
            <a-form-item label="来源">
              <a-select v-model="queryParam.cluesSource" @change="clueSourceChange" placeholder="请选择来源"
                        class="select-box">
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">爬虫</a-select-option>
                <a-select-option value="2">用户爆料</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="5" :sm="6" v-if="queryParam.cluesSource == '1' ">
            <a-form-item label="爬虫来源">
              <a-select v-model="queryParam.crawlerSource" placeholder="请选择爬虫来源" class="select-box">
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="0">新华网</a-select-option>
                <a-select-option value="1">学习强国</a-select-option>
                <a-select-option value="2">中国日报</a-select-option>
                <a-select-option value="3">央视网</a-select-option>
                <a-select-option value="4">央广网</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="2" :lg="2" :md="2" :sm="24" style="margin-left: -50px;">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search" shape="circle"></a-button>
            </span>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button v-has="'task:create'" type="primary" icon="plus" @click="createTask">创建任务</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <div class="ant-alert ant-alert-info">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <a style="margin-left: 24px" @click="batchDel">批量删除</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <template slot="sourceSlot" slot-scope="text, record">
          <div v-if="record.cluesSource == 1">爬虫</div>
          <div v-else-if="record.cluesSource == 2">用户爆料</div>
          <div v-else>未知</div>
        </template>

        <template slot="crawlerSourceSlot" slot-scope="text, record">
          <div v-if="record.crawlerSource == 0">新华网</div>
          <div v-else-if="record.crawlerSource == 1">学习强国</div>
          <div v-else-if="record.crawlerSource == 2">中国日报</div>
          <div v-else-if="record.crawlerSource == 3">央视网</div>
          <div v-else-if="record.crawlerSource == 4">央广网</div>
          <div v-else>未知</div>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)"><a-icon type="eye" theme="filled"/></a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确认删除?" @confirm="deleteClue(record)" okText="Yes" cancelText="No">
            <a href="#" style="margin-right: 10px"><a-icon type="delete" theme="filled" style="color:#ed7770"/></a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <clueDetail ref="clueDetail"></clueDetail>
    <task-create ref="taskCreate" @createSuccess="goTaskList"></task-create>
  </a-card>
</template>

<script>
  import {deleteAction, getAction, postAction} from '@/api/manage'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import ClueDetail from './modules/ClueDetail'
  import TaskCreate from "../task/TaskCreate";

  export default {
    name: 'ClueList',
    mixins: [JeecgListMixin],
    components: {TaskCreate, JInput, ClueDetail},
    data() {
      return {
        queryParam: {},
        selectedRowKeys: [],
        keywordList: [{keywordName: '全部', keywordValue: ''}],
        flag: false,
        showActive: true,
        columns: [
          {
            title: '关键词',
            align: 'center',
            dataIndex: 'keyword',
            width: 80
          },
          {
            title: '线索标题',
            align: 'center',
            width: 150,
            dataIndex: 'cluesTitle'
          },
          {
            title: '来源',
            align: 'center',
            width: 80,
            dataIndex: 'cluesSource',
            scopedSlots: {
              customRender: 'sourceSlot'
            }
          },

          {
            title: '爬虫来源',
            align: 'center',
            width: 80,
            dataIndex: 'crawlerSource',
            scopedSlots: {
              customRender: 'crawlerSourceSlot'
            }
          },
          {
            title: '抓取/创建时间',
            align: 'center',
            width: 120,
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {
              customRender: 'action'
            },
            align: 'center',
            width: 170
          }
        ],
        url: {
          list: '/clues/list',
          delete: '/clues/delete',
          deleteBatch: '/clues/deleteBatch',
          initKeywordList: '/clues/initKeywordList'
        },
        taskParams: {
          clues: null
        },
        showTaskModal: false
      }
    },
    created() {
      this.initKeywordList()
    },
    methods: {
      clueSourceChange(value) {
        if (value == 2 && this.queryParam.crawlerSource) {
          this.queryParam.crawlerSource = undefined;
        }
      },
      //todo:改成get/post
      deleteClue: function (record) {
        deleteAction(this.url.delete, record).then(res => {
          if (res.success) {
            this.loadData()
          }
        })
      },
      initKeywordList: function () {
        postAction(this.url.initKeywordList).then(res => {
          if (res.success) {
            this.keywordList = res.result
          }
        })
      },
      handleDetail: function (record) {
        this.$refs.clueDetail.detail(record, true)
        this.$refs.clueDetail.title = '详情'
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        let selectList = [];
        if (selectedRows && selectedRows.length > 0) {
          selectedRows.forEach(item => {
            selectList.push({
              id: item.id,
              clueTitle: item.cluesTitle
            })
          })
        }
        this.taskParams.clues = selectList;
        this.selectedRowKeys = selectedRowKeys;
      },
      createTask() {
        this.$refs.taskCreate.show(this.taskParams);
      },
      //去任务列表
      goTaskList() {
        this.$router.push('/task/list')
      },
    }
  }
</script>
<style lang="less">
  @import '~@assets/less/common.less';

  .search-box-cuesList.table-page-search-wrapper .ant-form-inline .ant-form-item,
  .search-box-cuesList.table-page-search-wrapper .table-page-search-submitButtons {
    margin-bottom: 0 !important;
    padding: 24px;
  }

  .search-box-cuesList {
    background-color: #fff;
  }

  .select-box .ant-select-selection {
    border-radius: 5px;
  }

  .ant-alert-info {
    background-color: #EFF2F5;
    border: none;
    text-align: right;
  }

</style>
